<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">

<head>
    <base href="<%=basePath %>">
    <meta charset="UTF-8">
    <title>预定限额管理界面</title>
    <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
    <link rel="icon" href="image/common/logo.png" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath %>css/font/iconfont.css?v=1.0.0" media="all">
    <link rel="stylesheet" type="text/css" href="<%=basePath %>js/layui/css/layui.css" media="all">
    <link href="<%=basePath %>js/common/ztree/zTreeStyle/zTreeStyle.css" rel="stylesheet"  type="text/css"/>
    <script type="text/javascript" src="<%=basePath %>js/common/jquery-1.8.2.js"></script>
    <script src="<%=basePath %>js/common/ztree/jquery.ztree.all.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="<%=basePath %>js/layui/layui.js"></script>
	<script type="text/javascript"> 
				/* 添加模板 */
		  layui.config({
	            base: "js/common/"
	        }).use(["common", "layer"], function () {
	            var layer = layui.layer;
	            var $ = layui.jquery;
	            layui.common.init();
	        });
				var setting = {
			        async: {
			            enable: true, // 设置 zTree是否开启异步加载模式 
			            url: "${pageContext.request.contextPath}/reservation/getTree.do?tmp="+Math.random(),//每次进行异步请求的URL地址	
			            autoParam: ["id"],//这个id就是当前的id  areaId
			            type: "get",//提交方式
			            dataFilter: filter//用来处理ajax返回的数据，也就是当前的url请求之后返回的数据
			        },
			        callback: {
			            onClick: select//用来处理节点被点击之后执行的回调函数
			        }
			    };
			    function filter(treeId, parentNode, childNodes) {//参数三:指的是传过来的节点信息
			        setNode(childNodes);
			        return childNodes;
			    }
			    //点击父节点展示字节点的方法
			    function setNode(nodes) {
			        if (!nodes) return null;
			        for (var i = 0,l = nodes.length; i < l; i++) {
			            nodes[i].url = "";
			            setNode(nodes[i].children);
			        }
			    }
			    $(document).ready(function () {
			    	//生成zTree树 
			        $.fn.zTree.init($("#goodsClass"), setting);
			    });
			    
			    function select(event, treeId, treeNode) {//参数三就是当前的节点封装的对象这个对象里面的信息就是自己点击的时候传递的
			        $("#goodsClassDetails").load("reservation/gotoReservationUpdJsp.do?areaId="+treeNode.id+"&tmp=${tmp}");//用来展示对应的信息的页面
				 }
	</script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>预定限额</legend>
</fieldset>
<div style="margin-top:10px;">
    <div style="float: left; display: block; margin: 0px 10px; overflow: auto; width: 240px;
      height: 763px; border: solid 1px #CCC; background: #FFF;">
        
           <div>
             <ul class="ztree" id="goodsClass">
             </ul>
           </div>
           
     </div>
     <div id="goodsClassDetails"  style="height: 763px;border: solid 1px #CCC ;background:#eee; margin-left: 256px;">
     
    </div>
 </div>
</body>
</html>